import React from 'react'
import { Panel, PanelBody, Form, CellHeader, CellBody, CellFooter, Label, FormCell, Input, CityPicker, TextArea, Switch, Button, Toptips } from 'react-weui'
import { browserHistory } from 'react-router'
import Title from '../../ReuseTitle'
import { data } from './citys'

export default class UserSetAddForm extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
	        city_show: false,
	        city_value: '',
	        name: '',
	        phone: '',
	        content: '',
	        postCode: '',
	        is_default: 0,
	        showWarn: false,
	        warnTimer: null,
	        edited: false,
	       
		}
		this.handleAddAddress = this.handleAddAddress.bind(this)
		this.handleSetDefalutAdd = this.handleSetDefalutAdd.bind(this)
	}
	hide(){
        this.setState({
            city_show: false
        })
    }
    handleSelectArea(text) {
		this.setState({
			city_value: text,
			city_show: false
		});
		document.getElementById('areaInput').removeAttribute('defaultValue');
		document.getElementById('areaInput').value = this.state.city_value;
    }

    handleAddAddress() {
		const { name, phone, postCode, content, city_value } = this.state;
		const addressId = this.props.addressId;
    	if(name=='' || phone=='' || postCode=='' || content=='' || city_value=='') {
    		this.setState({
    			showWarn: true
    		});
    		this.state.warnTimer = setTimeout(() => {
    			this.setState({
    				showWarn: false
    			})
    		}, 2000);
    		return;
    	} 
    	const area = city_value.split(' ');
    	if(this.props.edit === false) {
    		this.props.addAddress(name, phone, area[0], area[1], area[2], content, postCode);
    	}else {
    		this.props.editAddress(addressId, name, phone, area[0], area[1], area[2], content, postCode);
    		this.setState({
    			edited: true
    		})
    	}
    }	

    handleSetDefalutAdd() {
    	this.props.setDefaultAddress(this.props.addressId);
    
    }

    componentWillReceiveProps(nextProps) {
    	if(this.props.edit === true) {
    		this.setState({
    			name:nextProps.add_data.name,
    			phone: nextProps.add_data.phone,
    			content: nextProps.add_data.content,
    			postCode: nextProps.add_data.postCode,
    			city_value: nextProps.add_data.p_name + ' ' + nextProps.add_data.c_name + ' ' + nextProps.add_data.d_name,
    			is_default: nextProps.add_data.is_default,
    		});
    	}
    	if(this.props.edit === false && nextProps.isAdded === true) {
    		browserHistory.push(`/store/${this.props.storeId}/user/address`);
    	}
    	if(this.props.edit === true && nextProps.isEdited === true && this.state.edited) {
    		this.setState({
    			edited: false 
    		});
    		browserHistory.push(`/store/${this.props.storeId}/user/address`);
    	}
    }

    componentWillUnmount() {
    	this.state.warnTimer&&clearTimeout(this.state.warnTimer)
    }

	render() {
		const { edit, add_data } = this.props;
		return (
			<div>
            	<PanelBody style={{ marginTop: '60px'}}>
            		<Form >
            		    <FormCell>
		                    <CellHeader>
		                        <Label>收货人姓名</Label>
		                    </CellHeader>
		                    <CellBody>
		                        <Input 
		                        	type="text"  
		                        	placeholder="请输入收货人姓名" 
		                        	defaultValue={edit==true&&add_data!==undefined?add_data.name:null} 
		                        	onChange={(e) => this.setState({ name: e.target.value })}
		                        />
		                    </CellBody>
		                </FormCell>
		                <FormCell>
		                    <CellHeader>
		                        <Label>手机号码</Label>
		                    </CellHeader>
		                    <CellBody>
		                        <Input 
		                        	type="tel" 
		                        	placeholder="请输入手机号" 
		                        	defaultValue={edit==true&&add_data!==undefined?add_data.phone:null}  
		                        	onChange={(e) => this.setState({ phone: e.target.value })}
		                        />
		                    </CellBody>
		                </FormCell>
		                <FormCell>
	                        <CellHeader>
	                            <Label>所在地区</Label>
	                        </CellHeader>
	                        <CellBody>
	                            <Input 
	                            	type="text" 
	                            	id='areaInput'
	                            	defaultValue={
	                            		edit==true&&add_data!==undefined?add_data.p_name + ' ' + add_data.c_name + ' ' + add_data.d_name : null
	                            	}
	                                onClick={ e=> {
	                                    e.preventDefault();
	                                    this.setState({city_show: true})
	                                }}
	                                placeholder="请选择"
	                                readOnly={true}
	                            />
	                        </CellBody>
                        </FormCell>
                        <FormCell>
 							<CellHeader>
								<Label>详细地址</Label>
 							</CellHeader>
 							<CellBody>
								<TextArea 
									placeholder="请输入街道地址" 
									defaultValue={edit==true&&add_data!==undefined?add_data.content : null} 
									onChange={(e) => this.setState({ content: e.target.value })}
								>
								</TextArea>
 							</CellBody>
                        </FormCell>
                        <FormCell>
                        	<CellHeader>
		                        <Label>邮编</Label>
		                    </CellHeader>
		                    <CellBody>
		                        <Input 
		                        	type="number" 
		                        	placeholder="请输入邮编" 
		                        	defaultValue={edit==true&&add_data!==undefined?add_data.postCode.toString():null} 
		                        	onChange={(e) => this.setState({ postCode: e.target.value })}
		                        />
		                    </CellBody>
		                </FormCell>
		            </Form>
	                <CityPicker
	                    data={data}
	                    onCancel={e=>this.setState({city_show: false})}
	                    onChange={this.handleSelectArea.bind(this)}
	                    show={this.state.city_show}
	                />
            	</PanelBody>
            	<CellBody style={{ margin: '32px 7px 0 7px' }}>
					<Button type="warn"  onClick={this.handleAddAddress}>确定</Button>
					<Toptips type="warn" show={this.state.showWarn}>请填写完整的信息！</Toptips>
                </CellBody>
            </div>
		);
	}
}
